<template>
  <view class="message-box" @click="gotoPage">
    <view class="image-box">
      <template v-for="item in showList || []" :key="item.customerId">
        <image class="image" :src="item.faceUrl"></image>
      </template>
      <text class="res-dot"></text>
    </view>
    <view class="total-box">{{props.total}}条新动态</view>
    <view class="icon-box">
      <uni-icons type="right" size="14"></uni-icons>
    </view>
  </view>
</template>

<script setup>
import { computed } from 'vue'
const props = defineProps({
  list: {
    default: () => [],
    type: Array
  },
  total: {
    default: 0,
    type: Number
  }
})
const emit = defineEmits(['clickback'])
const showList = computed(() => {
  return props.list.slice(0, 5)
})

const gotoPage = () => {
  emit('clickback')
  uni.navigateTo({
    url: '/user/attention'
  })
}
</script>

<style scoped lang="scss">
.message-box{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24rpx;
  .image-box{
    position: relative;
    display: inline-block;
    .image{
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
      margin-left: -16rpx;
    }
    .res-dot{
      position: absolute;
      width: 18rpx;
      height: 18rpx;
      border-radius: 50%;
      background-color: #E02020;
      right: -6rpx;
      top: 2rpx;
    }
  }
  .total-box{
    margin-left: 24rpx;
    color: #666666;
  }
  .icon-box{
    margin-top: 6rpx;
    margin-left: 4rpx;
  }
}
</style>
